<template>
  <div>
    <div class="cont">
      <MyDay8Vue :lists="listt">
        <template #header></template>
        <template #body="{ item }">
          <div class="left">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use></svg
            >{{ item.name }}
          </div>
          <div class="right">
            <span>{{ item.sum }}</span>
          </div>
        </template>
      </MyDay8Vue>
      <MyDay8Vue :lists="lists">
        <template #header>
          <h3>本周热搜 TOP5</h3>
        </template>
        <template #body="{ item }">
          <div class="left">
            <span>#{{ item.name }}</span>
          </div>
          <div class="right">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fire1"></use></svg
            >{{ item.num }}
          </div>
        </template>
      </MyDay8Vue>
      <MyDay8Vue :lists="listi">
        <template #header>
          <div class="pep">
            <div>可能感兴趣的人</div>
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huan"></use></svg
              >换一批
            </div>
          </div>
        </template>
        <template #body="{ item }">
          <div class="left">
            <div class="leftf">
              <b>{{ item.name }}</b>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.icon"></use>
              </svg>
              <i>{{ item.age }}岁</i>
              <p>研究领域：{{ item.lingyu }}</p>
              <p>{{ item.school }}</p>
            </div>
          </div>
          <div class="right">
            <div class="guanzhu">+ 关注</div>
          </div>
        </template>
      </MyDay8Vue>
    </div>
  </div>
</template>
<script>
import MyDay8Vue from './components/my-day8vue.vue'
export default {
  components: {
    MyDay8Vue,
  },
  data() {
    return {
      lists: [
        {
          id: 111,
          name: '区块链',
          num: 96,
        },
        {
          id: 112,
          name: '数据挖掘',
          num: 91,
        },
        {
          id: 113,
          name: '无人机',
          num: 87,
        },
        {
          id: 114,
          name: '生命科学',
          num: 72,
        },
        {
          id: 115,
          name: '传感器',
          num: 60,
        },
      ],
      listt: [
        {
          id: 101,
          name: '我的赞',
          sum: '1,287',
          icon: '#icon-zan',
        },
        {
          id: 102,
          name: '我的收藏',
          sum: '654',
          icon: '#icon-star',
        },
      ],
      listi: [
        {
          id: 201,
          name: '李国盛',
          age: 52,
          lingyu: '机电一体化',
          school: '哈尔滨工业大学·教授',
          icon: '#icon-nan',
        },
        {
          id: 202,
          name: '陈颖',
          age: 36,
          lingyu: '人工智能',
          school: '清华大学·副教授',
          icon: '#icon-nv',
        },
      ],
    }
  },
}
</script>
<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.cont {
  width: 300px;
  background-color: #f4f6fa;
  margin: 0 auto;
  padding: 10px;
}
span {
  background-color: #f5f6fa;
  padding: 5px 8px;
  border-radius: 8px;
}
.pep {
  display: flex;
  justify-content: space-between;
}
.leftf p {
  font-size: 12px;
}
.leftf i {
  font-size: 12px;
}
.right .guanzhu {
  width: 50px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  background-color: #2878ff;
  text-align: center;
  color: #fff;
  border-radius: 10px;
}
</style>
